import topIcon0 from './images/top-fire-0.png'
import topIcon1 from './images/top-fire-1.png'
import topIcon2 from './images/top-fire-2.png'
import styles from './styles.module.scss'

console.log(styles)

const icons = [topIcon0, topIcon1, topIcon2]

function TopItem({item, index}) {
  return (
    <a
      className={styles.topItem}
      href="/link/33096350"
    >
      <div className="top-ten-matching-con left">
        {
          (index >=0 && index <= 2) &&
          <img className={styles.topIcon}
          src={icons[index]}
          alt=''/>
        }

        <img
          className={styles.topItemImg}
          src={item.imgUrl}
          alt={item.title}
        />
      </div>
      <div className="top-ten-title left"
           title={item.title}>
        {item.title}
      </div>
    </a>
  )
}

export default TopItem
